<template>
  <div id="Header">
    <div class="head">
    <router-link tag="div" :to="{name:'homeLink'}" class="title left fa fa-chrome"></router-link>
    <router-link tag="div" :to="{name:'homeLink'}" class="title left">{{title}}</router-link>
    <router-link tag="div" :to="{name:'menuLink'}" class="menu-item menu left">菜单</router-link>
    <div class="left separater" style="width:1px;height:70px;">|</div>
    <router-link tag="div" :to="{name:'memberLink'}" class="menu-item menu left">会员中心</router-link>
    <router-link tag="div" :to="{name:'orderLink'}" class="menu-item button right">立即点餐</router-link>
     <div class="customer-service">
        <a href="">
          <i class='fa fa-headphones'></i><span>在线客服</span>
        </a>
     </div>
  </div>
  </div>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {
      title: "Pizza点餐系统"
    };
  }
};
</script>

<style>
@import '/static/css/pizza.css';
.h-item {
  height: 70px;
  line-height: 70px;
}
.head{
  position:fixed;
  width: 1200px;
  height: 70px;
  line-height: 70px;
  z-index:1000;
  background-color:#fff;
}


.head .customer-service{
  position:absolute;
  right:-30px;
  top :80px;
  font-size:12px;
  width:20px;
  height:100px;
  text-align:center;
   line-height: 16px;

}
.head .customer-service .fa{
  font-size:18px;
  margin-bottom:10px;
}



#Header {
  position:relative;
  width: 1200px;
  height: 70px;
  line-height: 70px;
  /* background-color:blue; */
}
#Header .title {
  line-height: 70px;
  font-size: 32px;
  font-weight: bold;
  margin-left: 6px;
  margin-right: 6px;
  cursor: pointer;
}
#Header .title.fa-chrome{
  color:#f40;
}
#Header .menu-item {
  width: 140px;
  height: 70px;
  line-height: 70px;
  text-align: center;
}
#Header .menu-item.menu:active,
#Header .menu-item.menu:hover {
  border-top: 5px solid #f40;
  line-height: 60px;
  height:65px;
  color: #f40;
  cursor: pointer;
}
#Header .menu-item.button {
  width:240px;
  font-size: 20px;
  /* font-weight:bold; */
  background-color: #f40;
  color: white;
}
#Header .menu-item.button:hover {
  font-weight: bold;
  background-color: red;
  cursor: pointer;
}
</style>
